// pages/good/shopInfo.js
const api = require("../../request/api")
const request = require("../../request/request")
const util = require("../../utils/util")
const App = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        barHeight: App.globalData.paddingTop,
        styledata: {
            "bg_color": "white",
            "color": "#000",
            "leftflag": true,
            // "homeflag": true,
            "name": "店铺信息"
        },

        visible: false,

        // 记录生成图形码 输入图形码
        pictext: '',
        codetext: '',

        // 店铺id
        id: '1',

        // 店铺详情
        shopDetail: {
            true_name: '千金品牌旗舰店',
            logo: "http://img.qian.gzzsu.com/shop/qiankanghui/home-img/qianjin.png",
            extinfo: {
                certificate_img: 'http://img.qian.gzzsu.com/shop/qiankanghui/home-img/shouquan.jpg'
            },
            parent_true_name: "广州济民倍健连锁大药房有限公司",
            paper_img: 'http://img.qian.gzzsu.com/shop/qiankanghui/home-img/qualification.jpg'
            // http://img.qian.gzzsu.com/shop/20231207/cxhz6vcl4y38p529lz.png
        },
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let { shopid } = options
        this.setData({
            id: shopid
        })
        console.log('店铺id', shopid);
        this.getshopDetail()
    },

    // 获取店铺详情
    async getshopDetail() {
        let res = await request.postall(api.shopDetail, { id: this.data.id })
        console.log(res);
        // 如果查询到店铺
        if (res.code == 0) {
            this.setData({
                shopDetail: res.data
            })
        }
        console.log(res);
    },

    // 品牌执照预览
    PreviewBrandImg(e) {
        wx.previewImage({
            current: this.data.shopDetail.extinfo.certificate_img, // 当前显示图片的http链接
            urls: [this.data.shopDetail.extinfo.certificate_img],// 需要预览的图片http链接列表
        })
    },

    ctx: null,
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        this.ctx = wx.createCanvasContext('captcha', this);
        this.drawCaptcha();
    },

    // 点击刷新图形验证码
    refreshCaptcha() {
        this.drawCaptcha();
    },

    // 生成随机字符串
    generateCode() {
        const codes = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let code = '';
        for (let i = 0; i < 4; i++) {
            const index = Math.floor(Math.random() * codes.length);
            code += codes[index];
        }

        // 缓存生成code
        this.setData({
            pictext: code
        })
        return code;
    },

    // 绘制背景色和文本
    drawBackground(ctx, width, height) {
        // 绘制背景色
        ctx.setFillStyle('#f2f2f2');
        ctx.fillRect(0, 0, width, height);

        // 绘制文本
        const code = this.generateCode();
        const fontSize = Math.min(width / 4, height / 1.5);
        // const fontSize = Math.min(height, width);

        const fontX = (width - fontSize * 4) / 2 + fontSize;
        const fontY = (height - fontSize) / 2 + fontSize;
        ctx.setFontSize(fontSize);
        ctx.setFillStyle('#666');
        ctx.fillText(code, fontX, fontY);

        return code;
    },

    // 绘制干扰线
    drawLine(ctx, width, height) {
        // 绘制干扰线
        for (let i = 0; i < 3; i++) {
            const startX = Math.random() * width;
            const startY = Math.random() * height;
            const endX = Math.random() * width;
            const endY = Math.random() * height;
            ctx.setStrokeStyle('#666');
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();
        }
    },

    drawCaptcha() {
        const width = 80;
        const height = 50;
        const code = this.drawBackground(this.ctx, width, height);
        this.drawLine(this.ctx, width, height);
        this.ctx.draw();
        return code;
    },

    // 点击查看弹出
    handlePopup(e) {
        this.setData(
            { visible: true }
        );
    },

    // 点击遮罩层去隐藏弹出层
    onVisibleChange(e) {
        this.setData({
            visible: e.detail.visible,
        });
    },

    // 输入code
    handleInput(e) {
        this.setData({
            codetext: e.detail.value
        })
    },

    // 比对输入code
    submitcode() {
        let id = this.data.id
        let pictext = this.data.pictext.toLowerCase()
        let codetext = this.data.codetext.toLowerCase()

        if (codetext == '') {
            util.showToast('请输入验证码')
            return
        }

        if (pictext == codetext) {
            this.setData({
                codetext: '',
                visible: false
            })
            this.refreshCaptcha()
            let imgStr = this.data.shopDetail.paper_img
            wx.navigateTo({
                url: `/pages/good/qualification?imgStr=${imgStr}`
            })
        } else {
            wx.showToast({
                icon: 'none',
                title: '输入有误',
                duration: 1000
            })
            this.refreshCaptcha()
            this.setData({
                codetext: ''
            })
        }
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})